import Svg from "@/components/base/Svg"
import { kycForm } from "@/forms"
import { css } from "@emotion/react"
import { motion } from "motion/react"
import { useCallback, useMemo } from "react"
import StepCircleFlag from "@/components/kyc/steps/components/StepCircleFlag"
import KycPageSignals from "@/features_signal/kycPageSignals"
import { useNavigate } from "react-router-dom"
export default function StepHeader() {
    const currentStage = KycPageSignals.currentStage.value
    const status = KycPageSignals.currentStatus.value

    const title = useMemo(() => {
        switch (currentStage.step) {
            case "step-kyc-intro-guide": {
                return "KYC Verify Guide"
            }
            case "step-kyc-select-id-type": {
                return "Select ID Type"
            }
            case "step-kyc-ocr": {
                return "Kyc OCR"
            }
            case "step-kyc-ocr-callback-result": {
                return "OCR Result"
            }
            case "step-kyc-selfie-guide": {
                return "Selfie With ID Card"
            }
            case "step-kyc-selfie-photo": {
                return "Selfie With ID Card"
            }
            case "step-kyc-take-id-selfie-result": {
                return "Selfie With ID Card"
            }
            case "step-kyc-basic-information-form": {
                return "Basic Information"
            }
            case "step-kyc-complete-form": {
                switch (status) {
                    case "pending": {
                        return "Information Confirmation (Pending)"
                    }
                    case "draft": {
                        return "Information Confirmation (Draft)"
                    }
                    case "rejected": {
                        return "Information Confirmation (Rejected)"
                    }
                    case "approved": {
                        return "Information Confirmation (Approved)"
                    }
                    case "final_rejected": {
                        return "Information Confirmation (Final Rejected)"
                    }
                    default: {
                        return "Information Confirmation"
                    }
                }
            }
            case "step-kyc-success": {
                return "KYC Success"
            }
            default: {
                return null
            }
        }
    }, [currentStage.step, status])

    return title ? <MainHeader title={title} /> : null
}

function MainHeader(props: { title: string }) {
    const methods = kycForm.useFormContext()
    const currentStage = KycPageSignals.currentStage.value
    const status = KycPageSignals.currentStatus.value
    const navigate = useNavigate()
    const { title } = props

    const handleBack = useCallback(() => {
        if (currentStage.step === "step-kyc-basic-information-form") {
            navigate(-1)
            return
        }

        KycPageSignals.prevStage()
    }, [currentStage.step, navigate])

    const rootError = methods.formState.errors.root

    const stepCircleFlag = useMemo(() => {
        switch (currentStage.step) {
            case "step-kyc-selfie-guide": {
                return (
                    <StepCircleFlag
                        stepsLength={3}
                        currentStep={1}
                        size={25}
                        strokeWidth={2}
                    />
                )
            }
            case "step-kyc-selfie-photo": {
                return (
                    <StepCircleFlag
                        stepsLength={3}
                        currentStep={2}
                        size={25}
                        strokeWidth={2}
                    />
                )
            }
            case "step-kyc-complete-form": {
                return (
                    <StepCircleFlag
                        stepsLength={3}
                        currentStep={3}
                        size={25}
                        strokeWidth={2}
                    />
                )
            }
            default: {
                return null
            }
        }
    }, [currentStage])

    const canBack = useMemo(() => {
        const steps: Kyc.Flow.Step[] = [
            // 需要返回的步骤
            "step-kyc-intro-guide",
            "step-kyc-select-id-type",
            "step-kyc-selfie-photo",
            "step-kyc-basic-information-form",
        ]
        return steps.includes(currentStage.step)
    }, [currentStage])

    const titleColor = useMemo(() => {
        switch (currentStage.step) {
            case "step-kyc-complete-form": {
                switch (status) {
                    case "pending": {
                        return "#0043c8"
                    }
                    case "draft": {
                        return "#474747"
                    }
                    case "rejected": {
                        return "#c08900"
                    }
                    case "approved": {
                        return "#008000"
                    }
                    case "final_rejected": {
                        return "#a20000"
                    }
                    default: {
                        return "#000000"
                    }
                }
            }
            default: {
                return "#000000"
            }
        }
    }, [currentStage.step, status])

    return (
        <div
            css={css`
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: stretch;
                justify-content: flex-start;
                padding: 8rem 12rem;
                user-select: none;
            `}
        >
            <div
                css={css`
                    position: relative;
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    user-select: none;
                `}
            >
                {canBack && (
                    <Svg
                        onClick={handleBack}
                        css={css`
                            width: 28rem;
                            height: 28rem;
                            cursor: pointer;
                        `}
                        src="kyc/arrow_backward.svg"
                    />
                )}
                <div
                    css={css`
                        flex: 1;
                        font-family: Gilroy;
                        font-weight: 700;
                        font-size: 18rem;
                        line-height: 28rem;
                        letter-spacing: 0%;
                        text-align: center;
                        vertical-align: middle;
                        text-transform: capitalize;
                        color: ${titleColor};
                    `}
                >
                    {title}
                </div>
                {stepCircleFlag}
            </div>
            {rootError && (
                <motion.div
                    initial={{ opacity: 0, y: -100 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0, y: -100 }}
                    css={css`
                        color: red;
                        font-family: Gilroy;
                        font-weight: 700;
                        font-size: 12rem;
                        line-height: 16rem;
                        letter-spacing: 0%;
                        text-align: center;
                        vertical-align: middle;
                    `}
                >
                    {rootError.message}
                </motion.div>
            )}
        </div>
    )
}
